<template>
    <div class="flexCheckBox">
        <div class="flexName">
            <span class="label">{{ label }} :</span>
            <span class="value" :class="{
                hasValue: Value !== undefined
            }">{{ Value === undefined ? defaultValue : Value }}</span>
        </div>
        <div class="flexOptions">
            <template v-for="item in options">
                <a-tooltip :title="item.value" placement="top">
                    <div class="flexItem" :class="{ active: item.value == Value }" @click="checkEvent(item.value)">
                        <span class="C-Flex" :class="{ left: item.value != 'baseline' && direction }"
                            v-html="item.icon"></span>
                    </div>
                </a-tooltip>
            </template>
        </div>
    </div>
</template>
<script setup>

const props = defineProps(['label', 'options', 'defaultValue', 'direction']);
const Value = defineModel('value');

const checkEvent = function (value) {
    if (Value.value == value) {
        Value.value = undefined;
    } else {
        Value.value = value
    }
}

</script>
<style lang="less" scoped>
.flexCheckBox {
    padding: 8px 0 0 0;

    .flexName {
        padding-bottom: 4px;

        .label {
            color: #dc362e;
        }

        .value {
            color: #999;

            &.hasValue {
                color: #333;
            }
        }

    }

    .flexOptions {
        display: flex;

        .flexItem {
            width: 32px;
            height: 32px;
            text-align: center;
            border: 2px solid #ccc;
            margin-right: 4px;

            display: flex;
            justify-content: center;
            align-items: center;

            &.active {
                color: #1677ff;
                border-color: #1677ff;
            }

            .C-Flex {
                font-size: 20px;
            }

            .left {
                transform: rotateZ(-90deg);
            }
        }

        .direction {
            transform: rotateZ(90deg);
        }
    }
}
</style>